import 'package:flutter/material.dart';
import '../theme/theme.dart';

/// 右侧边栏组件
class SideSettingBar extends StatelessWidget {
  /// 是否折叠侧边栏
  final bool isCollapsed;
  
  /// 折叠侧边栏切换回调
  final ValueChanged<bool> onCollapsedChanged;

  const SideSettingBar({
    super.key,
    required this.isCollapsed,
    required this.onCollapsedChanged,
  });

  @override
  Widget build(BuildContext context) {
    final theme = HTheme.of(context);
    
    return Container(
      color: Colors.white,
      child: DefaultTabController(
        length: 3,
        child: Column(
          children: [
            // 标签页头部
            TabBar(
              labelColor: theme.colors.primary,
              unselectedLabelColor: theme.colors.textSecondary,
              indicatorColor: theme.colors.primary,
              tabs: const [
                Tab(icon: Icon(Icons.palette), text: '主题'),
                Tab(icon: Icon(Icons.notifications), text: '通知'),
                Tab(icon: Icon(Icons.assignment), text: '任务'),
              ],
            ),
            
            // 标签页内容
            Expanded(
              child: TabBarView(
                children: [
                  // 主题设置
                  _buildThemeSettings(theme),
                  
                  // 通知列表
                  _buildNotificationsList(theme),
                  
                  // 任务列表
                  _buildTasksList(theme),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  
  // 主题设置
  Widget _buildThemeSettings(HTheme theme) {
    return ListView(
      padding: const EdgeInsets.all(16),
      children: [
        Text(
          '主题设置',
          style: TextStyle(
            color: theme.colors.text,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 16),
        
        // 折叠侧边栏选项
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '折叠侧边栏',
              style: TextStyle(color: theme.colors.text),
            ),
            Switch(
              value: isCollapsed,
              activeColor: theme.colors.primary,
              onChanged: onCollapsedChanged,
            ),
          ],
        ),
        
        // 固定顶部栏选项
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '固定顶部栏',
              style: TextStyle(color: theme.colors.text),
            ),
            Switch(
              value: true,
              activeColor: theme.colors.primary,
              onChanged: (value) {},
            ),
          ],
        ),
        
        // 固定宽度选项
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              '固定宽度',
              style: TextStyle(color: theme.colors.text),
            ),
            Switch(
              value: false,
              activeColor: theme.colors.primary,
              onChanged: (value) {},
            ),
          ],
        ),
        
        const Divider(),
        
        // 皮肤选择
        Text(
          '皮肤选择',
          style: TextStyle(
            color: theme.colors.text,
            fontSize: 16,
            fontWeight: FontWeight.bold,
          ),
        ),
        const SizedBox(height: 16),
        
        // 默认皮肤
        _buildThemeOption(
          theme,
          title: '默认皮肤',
          color: theme.colors.primary,
          isSelected: true,
        ),
        
        // 蓝色皮肤
        _buildThemeOption(
          theme,
          title: '蓝色主题',
          color: Colors.blue,
          isSelected: false,
        ),
        
        // 黄色/紫色皮肤
        _buildThemeOption(
          theme,
          title: '黄色/紫色主题',
          color: Colors.deepPurple,
          isSelected: false,
        ),
      ],
    );
  }
  
  // 主题选项
  Widget _buildThemeOption(HTheme theme,
      {required String title, required Color color, required bool isSelected}) {
    return Container(
      margin: const EdgeInsets.only(bottom: 12),
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
      decoration: BoxDecoration(
        color: isSelected ? color.withOpacity(0.1) : Colors.transparent,
        borderRadius: BorderRadius.circular(4),
        border: Border.all(
          color: isSelected ? color : Colors.transparent,
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            title,
            style: TextStyle(
              color: theme.colors.text,
              fontWeight: isSelected ? FontWeight.w500 : FontWeight.normal,
            ),
          ),
          Container(
            width: 16,
            height: 16,
            decoration: BoxDecoration(
              color: color,
              shape: BoxShape.circle,
            ),
          ),
        ],
      ),
    );
  }
  
  // 通知列表
  Widget _buildNotificationsList(HTheme theme) {
    return ListView.separated(
      padding: const EdgeInsets.all(0),
      itemCount: 5,
      separatorBuilder: (context, index) => Divider(
        height: 1,
        color: theme.colors.divider,
      ),
      itemBuilder: (context, index) {
        return ListTile(
          leading: CircleAvatar(
            backgroundColor: theme.colors.primary.withOpacity(0.1),
            child: Icon(Icons.notification_important, color: theme.colors.primary, size: 20),
          ),
          title: Text(
            '系统通知 ${index + 1}',
            style: TextStyle(
              color: theme.colors.text,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          subtitle: Text(
            '这是一条系统通知，请注意查看。',
            style: TextStyle(
              color: theme.colors.textSecondary,
              fontSize: 12,
            ),
          ),
          trailing: Text(
            '刚刚',
            style: TextStyle(
              color: theme.colors.textSecondary,
              fontSize: 12,
            ),
          ),
        );
      },
    );
  }
  
  // 任务列表
  Widget _buildTasksList(HTheme theme) {
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemCount: 5,
      itemBuilder: (context, index) {
        // 模拟不同进度的任务
        final progress = (index + 1) * 20.0;
        
        return Container(
          margin: const EdgeInsets.only(bottom: 16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(
                    '任务 ${index + 1}',
                    style: TextStyle(
                      color: theme.colors.text,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                  Text(
                    '${progress.toInt()}%',
                    style: TextStyle(
                      color: theme.colors.textSecondary,
                      fontSize: 12,
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 4),
              Text(
                '这是任务的描述内容，显示任务的详细信息。',
                style: TextStyle(
                  color: theme.colors.textSecondary,
                  fontSize: 12,
                ),
              ),
              const SizedBox(height: 8),
              LinearProgressIndicator(
                value: progress / 100,
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation<Color>(
                  _getProgressColor(theme, progress),
                ),
              ),
            ],
          ),
        );
      },
    );
  }
  
  // 根据进度获取不同颜色
  Color _getProgressColor(HTheme theme, double progress) {
    if (progress < 30) {
      return theme.colors.danger;
    } else if (progress < 70) {
      return theme.colors.warning;
    } else {
      return theme.colors.success;
    }
  }
} 